<template>
  <div>
    <!-- 首页图片 -->
    <div class = "sign-image">
      <img src="../assets/images/每日签到/sign.png" alt="">
    </div>
    <!-- 内容部分 -->
    <div class = "content-container">
      <div class = "content">
        <h2>您已连续签到1天</h2>
      <p>连续签到7日后每日得3分
        <img src="../assets/images/每日签到/signleft.png" alt="">
      </p>
      </div>
      <!-- 签到部分 -->
      <div class="swtich-container">
        <p>签到提醒</p>
        <van-switch active-color="#EEAE48" inactive-color="#EFECEE"  v-model="checked" size="24px" @click="switchClick" />
      </div>
    </div>
    <!-- 签到图片 -->
    <div class = "seven-images">
      <p>
        <ul>
          <li v-for = "n in 7" :key="n">+{{n}}</li>
        </ul>
      </p>
      <img src="../assets/images/每日签到/seven.png" alt="">
      <div class= "time">
        <ol>
          <li>今日</li>
          <li>明日</li>
          <li>06.03</li>
          <li>06.04</li>
          <li>06.05</li>
          <li>06.06</li>
          <li>06.07</li>
        </ol>
      </div>
    </div>
    <!-- 我的积分部分 -->
    <div class = "points">
      <span>我的积分:&nbsp;</span>
      <span>7分&nbsp;</span>
      <img src="../assets/images/每日签到/rightbtn.png" alt="">
    </div>
  </div>
  <!-- 任务中心部分 -->
     <van-nav-bar  left-text="任务中心" >
      <template #right>
        <span style="color:#626262">全部任务&nbsp;</span>
        <img src="../assets/images/每日签到/rightbtn.png" alt="" style="width:8.5px;height:13px">
      </template>
    </van-nav-bar>
    <!-- 任务中心next部分 -->
    <div class= "target">
      <img src="../assets/images/每日签到/target.png" alt="">
      <div class = "target-content">
        <p>连续签到积分递增</p>
        <span>每日一签不见不散</span>
      </div>
    </div>
    <!--图部分 -->
   <div class = "foot-container">
     <ul>
       <li><a href="">
         <img src="../assets/images/每日签到/footpic1.png" alt="">
         <h3>用耳朵治愈生活</h3>
         <p>2021.06.01--2021.06.01</p>
         </a></li>
         <li><a href="">
         <img src="../assets/images/每日签到/footpic2.png" alt="">
         <h3>新周年父母庆典共读樊登读书的项目</h3>
         <p>2021.06.01--2021.06.01</p>
         </a></li>
         <li><a href="">
         <img src="../assets/images/每日签到/footpic3.png" alt="">
         <h3>王阴阳的成功智慧</h3>
         <p>2021.06.01--2021.06.01</p>
         </a></li>
     </ul>
   </div>
</template>
    
<script>
import { ref } from 'vue';
import { Toast } from "vant";
export default {
    setup() {
    const checked = ref(false);
    const switchClick = () => {
      Toast('记得每天签到哦');
    }
    return { checked ,switchClick  };
    
  },
};
</script>

<style lang = "less" scoped>
.sign-image{
  width: 100%;
  height: 346.5px;
  img{
    width: 100%;
    height: 346.5px;
  }
}
.content-container{
  display: flex;
  width: 349px;
  height: 65.5px;
  margin-left:19px ;
  margin-right:8.5px ;
  h2{
    font-size: 16px;
    margin-top:26.5px ;
  }
}
.content{
  display: flex;
  flex-direction: column;
  width: 167px;
  height: 65.5px;
  p{
    font-size: 12.5px;
    color: #A7A7A7;
    margin-top:8px;
    img{
      width: 14px;
      height: 14px;
      vertical-align: bottom;
    }
  }
}
/* 签到部分 */
.swtich-container{
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  p{
    font-size: 13px;
    color:#333333;
    font-weight: 700;
  }
}
/* 七张签到图片部分 */
.seven-images{
  width: 341.5px;
  margin-left:19px ;
  margin-top:20.5px ;
  img{
    width: 100%;
    height: 19.5px;
  }
  ul{
    display: flex;
    li{
      display: flex;
      color:#6E6E6E;
      font-size: 12px;
      margin-right:40.5px ;
    }
  }
}
.time{
  flex-direction:row ;
  ol{
    display: flex;
    width: 375px;
    margin-left:-19px ;
    li{
      display: flex;
      font-size: 12px;
      flex: 1;
      text-indent: 15px;
    }
  }
}
/* 积分部分 */
.points{
  display: flex;
  width: 100%;
  margin-top: 21px;
  justify-content: center;
  align-items: center;
  span{
    font-size: 13px;
    font-weight: bold;
  }
  img{
    width: 8.5px;
    height: 13px;
  }
}
/* 任务中心字体样式 */
/deep/.van-nav-bar__text{
  font-size: 16px;
  color: #000;
  font-weight: bold;
}
.target{
  display: flex;
  width: 341.5px;
  margin-left: 17px;
  img{
    width: 38.5px;
    height: 37.5px;
  }
  .target-content{
    display: flex;
    flex-direction: column;
    margin-left: 8PX;
    p{
      font-size: 16px;
      font-weight: bold;
    }
    span{
      font-size: 13px;
      color:#BAB9B9;
      margin-top: 6PX;
    }
  }
}
/* 末尾部分 */
.foot-container{
  margin-top: 9px;
  display: flex;
  width: 341.5px;
  margin-left: 17px;
  ul{
    display: flex;
    overflow: auto;
    li{
      margin-right: 12.5px;
      width: 143px;
    }
    img{
      width: 143px;
      height: 105px;
    }
    h3{
      font-size: 13px;
      color:#626262;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    p{
      font-size: 9.5px;
      margin-top: 3px;
      color:#d2d2d2;
    }
  }
}

</style>
